<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<script src="../lib/vue.min.js"></script>

<style>
  

   .red {
    background-color: red;
   }

   .yellow{
    background-color: yellow;
   }
</style>
</head>
<body>
    <div id="box">
      
      <button @click="handleClick()">click</button>
      <div :class="isActive?'red':'yellow'">我是动态绑定class-三目写法</div>
      <div :class="classobj">我是动态绑定class-对象写法</div>
      <div :class="classarr">我是动态绑定class-数组写法</div>

      <div :style="'background:'+(isActive?'red':'yellow')">我是动态绑定style-三目写法</div>

      <div :style="styleobj">我是动态绑定style-对象写法</div>
      <div :style="stylearr">我是动态绑定style-数组写法</div>
    </div>

    <script type="text/javascript">
    	
    	var vm = new Vue({
        el:"#box",
        data:{
          isActive:true,
          classobj:{
            a:true,
            b:true 
            // a b, class名字
          },
          classarr:["a","b"],
          styleobj:{
            backgroundColor:"red"
          },
          stylearr:[]
        },
        methods:{
          handleClick(){
            this.isActive = !this.isActive
          }
        }
      })
    	
    </script>
</body>
</html>